<template>
  <div id="messages">
    <el-container>
      <el-aside width="200px">
        <el-scrollbar>
          <div class="card actived">
            <img :src="`${getAssetsFile('images/message/day.png')}`" />
            <div class="card-content">
              <div class="title">工作通知<span class="badge">8</span></div>
              <div class="subtitle">这是一个消息通...<span class="time">03-20</span></div>
            </div>
          </div>
          <div class="card">
            <img :src="`${getAssetsFile('images/message/notice.png')}`" />
            <div class="card-content">
              <div class="title">推送消息<span class="badge">3</span></div>
              <div class="subtitle">这是一个消息...<span class="time">03-19</span></div>
            </div>
          </div>
          <div class="card">
            <img :src="`${getAssetsFile('images/message/audit.png')}`" />
            <div class="card-content">
              <div class="title">审核消息<span class="badge">5</span></div>
              <div class="subtitle">这是一个消息...<span class="time">03-19</span></div>
            </div>
          </div>
          <div class="card">
            <img :src="`${getAssetsFile('images/message/safe.png')}`" />
            <div class="card-content">
              <div class="title">安全消息<span class="badge">5</span></div>
              <div class="subtitle">这是一个消息...<span class="time">03-19</span></div>
            </div>
          </div>
        </el-scrollbar>
      </el-aside>
      <el-main>
        <el-scrollbar>
          <el-row justify="start">
            <el-col class="msg-col" :span="6" v-for="i in 10" :key="i">
              <el-card class="msg-card" shadow="hover">
                <template #header>
                  <div class="card-header">
                    <span>我是第{{i}}个消息</span>
                    <el-button icon="View" plain size="small"></el-button>
                  </div>
                </template>
                <div class="msg-content">我是第{{i}}个消息内容，是个很不错的好消息！！！</div>
                <div class="msg-footer">2023-03-20 13:19</div>
              </el-card>
            </el-col>
          </el-row>
        </el-scrollbar>
      </el-main>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import { getAssetsFile } from '@/utils/common';
</script>
<style lang="scss" scoped>
#messages {
  height: 100%;
  .el-container {
    height: 100%;
    .el-aside {
      height: 100%;
      background-color: $base-white;
      .card {
        height: 60px;
        position: relative;
        cursor: pointer;
        img {
          width: 40px;
          height: 40px;
          position: absolute;
          left: 10px;
          top: 10px;
        }
        .card-content {
          position: absolute;
          left: 60px;
          top: 5px;
          text-align: left;
          width: calc(100% - 60px);
          .title {
            margin-top: 4px;
            .badge {
              color: $base-white;
              background-color: $red-color;
              font-size: 12px;
              padding: 1px 4px;
              border-radius: 10px;
              float: right;
              margin-right: 10px;
              margin-top: 3px;
            }
          }
          .subtitle {
            font-size: 12px;
            color: $info-color;
            line-height: 26px;
            .time {
              float: right;
              margin-right: 10px;
            }
          }
        }
      }
      .actived {
        background-color: $bg-gray;
      }
    }
    .el-main {
      padding: 10px 5px;
      .msg-col {
        margin-bottom: 10px;
        padding: 0 10px;
      }
      .msg-card {
        :deep(.el-card__header) {
          padding: 10px 15px;
          .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .el-button {
              margin: 5px;
            }
          }
        }
        :deep(.el-card__body) {
          padding: 15px;
          .msg-content {
            line-height: 30px;
          }
          .msg-footer {
            color: $info-color;
            font-size: 12px;
            text-align: right;
            margin-top: 5px;
          }
        }
      }
    }
  }
}
</style>
